<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="page DevicePage">
      <van-nav-bar title="设备信息" left-arrow @click-left="show = false"/>
      <div class="flex-row" style="background: #fff; padding: 0.24rem 0;">
        <img :src="info.shopPhotUrl" style="width: 1.73rem; height: 1.73rem; border-radius: 0.13rem; margin: 0 0.4rem;"/>
        <div class="flex-col" style="height: 1.73rem; width: 100%; flex: 1;">
          <div style="font-size: 16px; font-weight: 600;">{{ info.shopName }}</div>
          <div class="font-org">设备编号：{{ info.equipmentNum }}</div>
          <div class="font-gray">添加时间：{{ info.createTime }}</div>
        </div>
      </div>
      <div class="page-content" style="margin-top: 0.27rem; background: #fff;">
        <div class="device-item flex-row" v-for="(item, index) in list" :key="index">
          <img :src="'./img/d4.png'">
          <div class="flex-col" style="width: 100%; flex: 1; margin-left: 0.37rem;">
            <div class="flex-row" style="justify-content: flex-start;">
              <span style="font-size: 14px; font-weight: 600;">卡槽位置：{{ item.n }}</span>
              <div class="tag" :class="{ green: item.e > 5 }" v-if="item.sn">{{ item.e * 10 }}%</div>
            </div>
            <div class="font-gray" style="margin-top: 0.1rem;">{{ item.sn || '暂无设备信息' }}</div>
          </div>
          <template v-if="item.sn">
            <div class="device-btn" @click="oneForce(item.n)" style="width: 50px; margin-right: 10px;"
              v-if="$store.state.userInfo.role.lend == 0">弹出</div>
            <div class="device-btn" @click="oneZujie(item.n)" style="width: 50px;">借出</div>
          </template>
          <template v-else>
            <div class="device-btn disabled">无设备</div>
          </template>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      info: {
        shopName: '',
        equipmentNum: '',
        shopPhotUrl: '',
        createTime: ''
      },
      list: []
    };
  },
  methods: {
    showBlank(info) {
      this.info = info;
      this.$axios.get('/api/chargerPlaController/getChargerInfo', { 
        equipmentNum: info.equipmentNum 
      }).then(res => {
        let json = res || {};
        this.list = json.list || [];
        this.show = true;
      });
    },
    allForce() {    
      this.$dialog.confirm({ message: `您确认要全部弹出充电宝吗？` }).then(() => {
        this.$axios.get(`/api/chargerPlaController/force`, { 
          equipmentNum: this.info.equipmentNum, n: 0 
        }).then(() => {
          this.$toast(`弹出成功！`)
        });
      })
    },
    oneForce(n) {    
      this.$dialog.confirm({ message: `您确认要弹出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
        this.$axios.get(`/api/chargerPlaController/force`, { 
          equipmentNum: this.info.equipmentNum, n 
        }).then(() => {
          this.$toast(`弹出成功！`);
        });
      });
    },
    oneZujie(n) {   
      this.$dialog.confirm({ message: `您确认要借出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
        this.$axios.get(`/api/chargerPlaController/borrow`, { 
          equipmentNum: this.info.equipmentNum, n 
        }).then(() => {
          this.$toast(`借出成功！`)
        });
      });
    }
  },
  mounted() { 
  }
};
</script>

<style lang="less">
.DevicePage {
  font-size: 12px;
  .device-item {
    width: 8.93rem;
    height: 1.6rem;
    background-color: #f8f9fd;
    border-radius: 0.13rem;
    margin: 0.27rem auto 0;
    &:last-child {
      margin-bottom: 0.3rem;
    }
    img {
      width: 0.56rem;
      height: 0.72rem;
      margin-left: 0.4rem;
    }
    .device-btn {
      width: 1.71rem;
      height: 0.59rem;
      line-height: 0.59rem;
      background-image: linear-gradient(-90deg, #1469fe 0%, #2775fd 100%);
      border-radius: 0.29rem;
      color: #fff;
      margin-right: 0.4rem;
      text-align: center;
    }
    .disabled {
      background: #b1b1b1;
    }
    .tag {
      width: 0.91rem;
      height: 0.35rem;
      line-height: 0.35rem;
      background-color: #ffd1d6;
      color: #d32e40;
      border-radius: 0.17rem;
      font-size: 10px;
      text-align: center;
      margin-left: 0.18rem;
    }
    .green {
      background-color: #adecd2;
      color: #0a9a39;
    }
  }
}
</style>
